<template>
	<div class="evidence-unit-inInventory-container">
		<el-dialog title="" v-model="isShowDialog" :append-to-body="true" width="940px">
			<div id="printCotent" style="border:0px solid blue;padding:15px">
				<div style="padding: 0px; border: 0px solid AliceBlue">
					<div class="head">
						<el-row :gutter="0" justify="center" style="border:0px;">
							<el-col :span="9" style="border:0px;text-align: left;">
								<div style="padding:0 0 8px 45px ;">入库清单</div>
								<qrcode-vue :value="barcodeNO" size:300  style="margin-left: 25px"></qrcode-vue>
							</el-col>
							<el-col :span="15" style="border:0px;text-align: right;">
								<span style="display: inline-block;border:0px solid black;width:400px;height:100px">
									<img id="barcode" style="margin-right: 25px;" />
								</span>
							</el-col>
						</el-row>
						<div style="font-size: 20px; text-align: right;font-weight: bold; width: 100%; text-align: center; margin-bottom: 10px">
							{{ formInlineCase.organName }}涉案财物保管场所
						</div>
						<div style="border-bottom: 1px solid black; width: 100%; margin-bottom: 3px"></div>
						<div style="border: 1px solid black; width: 100%; margin-bottom: 5px"></div>
						<div style="font-size: 16px; width: 100%; text-align: center; margin-bottom: 10px">入库清单</div>
					</div>
					<div style="margin: 10px; padding: 10px; height: 450px;position: relative;">
						<el-form :model="formInlineCase" label-width="110px" style="text-align: left">
							<el-row :gutter="0" justify="center" style="border-top: 1px solid black !important; border-bottom: none !important" id="first-row">
								<el-col :span="3">案件名称</el-col>
								<el-col :span="21" style="text-align: left"
									><div style="padding: 5px; padding-top: 1px">{{ formInlineCase.caseName }}</div></el-col
								>
							</el-row>
							<el-row :gutter="0" justify="left">
								<el-col :span="3">案发地点</el-col>
								<el-col :span="21" style="text-align: left">
									<div style="padding: 5px; padding-top: 1px">{{ formInlineCase.casePlace }}</div>
								</el-col>
							</el-row>
							<el-row :gutter="0" justify="center">
								<el-col :span="3">案件编号</el-col>
								<el-col :span="5" style="text-align: left; ">
									<div style="padding: 5px; padding-top: 1px">{{ formInlineCase.caseNo }}</div></el-col
								>
								<el-col :span="3">主办单位</el-col>
								<el-col :span="5" style="text-align: left; ">
									<div style="padding: 5px; padding-top: 1px">{{ formInlineCase.hostUserOrganName }}</div></el-col
								>
								<el-col :span="3">案件类别</el-col>
								<el-col :span="5" style="text-align: left; ">
									<div style="padding: 5px; padding-top: 1px">{{ formInlineCase.caseTypeName}}</div>
								</el-col>
							</el-row>
							<el-row :gutter="0" justify="center">
								<el-col :span="3">序号</el-col>
								<el-col :span="6">物品名称</el-col>
								<el-col :span="6">物品编号</el-col>
								<el-col :span="3">物品数量</el-col>
								<el-col :span="3">存放位置</el-col>
								<el-col :span="3">保管期限</el-col>
							</el-row>

							<el-row v-for="(item, i) in tableData" :key="i + '123'" :gutter="0" justify="center">
								<el-col :span="3">{{ i + 1 }}</el-col>
								<el-col :span="6">{{ item.evidenceName }}</el-col>
								<el-col :span="6">{{ item.evidenceNo }}</el-col>
								<el-col :span="3">{{ item.evidenceQuntity }}</el-col>
								<el-col :span="3">{{ item.location}}</el-col>
								<el-col :span="3">{{dateFormat(transfereInfo.returnTime)}}</el-col>
							</el-row>
							<el-row :gutter="0" style="height: 100px;" justify="left">
								<el-col :span="3">备注</el-col>
								<el-col :span="21" style="text-align: left">{{ transfereInfo.remark }}</el-col>
							</el-row>
						</el-form>
						<div style="bottom:10px;width: 100%;">
							<table width="100%">
								<tr>
									<td>移 交 人：</td>
									<td>
										<img v-if="signImg" :src="signImg" style="width: 200px; height: 80px;" />
									</td>
									<td>保 管 员：</td>
									<td>
										<img v-if="saveSignImg" :src="saveSignImg" style="width: 200px; height: 80px;" />
									</td>
								</tr>
								<tr>
									<td>电话：</td>
									<td>{{ transfereInfo.transferorPhone }}</td>
									<td>电话：</td>
									<td>{{ userInfo.phone }}</td>
								</tr>
								<tr>
									<td>交接时间：</td>
									<td>{{  dateFormatTime(transfereInfo.deliveryTime)  }}</td>
									<!-- <td>保管期限：</td>
									<td></td> -->
								</tr>
								<tr>
									<td colspan="4">说明：该清单一式两份，双方签字后，一份交予移交人，一份由保管员留底。</td>
								</tr>
							</table>
						</div>
						<el-row> </el-row>
					</div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="goPrint" size="small">打 印</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, nextTick, defineComponent } from 'vue';
import JsBarcode from 'jsbarcode';
import printJS from 'print-js';
import { dateFormat,dateFormatTime } from '/@/common/index';
import { Session } from '/@/utils/storage';
import QrcodeVue from 'qrcode.vue'
export default defineComponent({
	name: 'inInventory',
	props: { tableData: Array, formInline: Object },
	components: { QrcodeVue},
	setup(props: any) {
		const state = reactive({
			isShowDialog: false,
			formInlineCase: props.formInline,
			tableData: props.tableData,
			transfereInfo: {},
			saveSignImg: '',
			signImg: '',
			barcodeNO:''
		});
		const userInfo = Session.get('userInfo');
		// 打开弹窗
		const openDialog = (data: any) => {
			state.isShowDialog = true;
			state.formInlineCase = data.formInlineCase;
			state.tableData = data.row;
			state.transfereInfo = data.transfereInfo;
			state.saveSignImg = data.saveSignImg;
			state.signImg = data.signImg;
			state.barcodeNO = data.deliveryNo;
			nextTick(() => {
				JsBarcode('#barcode', data.deliveryNo, {
					format: 'CODE128',
					lineColor: '#000',
					background: '#ffffff',
					width: 2,
					height: 40,
					displayValue: true,
					textAlign: 'center',
					textMargin: 5,
				});
			});
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		const style = '@page {margin:10mm 10mm;height:inherit}; ';
		const goPrint = () => {
			printJS({
				printable: 'printCotent',
				type: 'html',
				targetStyles: ['*'],
				style,
				repeatTableHeader: false,
				ignoreElements: ['no-print', 'bc', 'gb'],
				maxWidth: 1300,
			});
		};
		return {
			openDialog,
			closeDialog,
			goPrint,
			onCancel,
			userInfo,
			dateFormat,
			dateFormatTime,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.el-row {
	border-left: 1px solid black;
}
.el-col {
	border: 1px solid black;
	border-left: none;
	border-top: none;
	padding: 3px !important;
	text-align: center;
}

table {
	width: 100%;
	margin-top: 10px;
	position: relative;
}

td {
	height: 30px;
}
</style>
